<template>
  <div class="page gray-page inspect-page">
    <nav-bar :title="title" border></nav-bar>
    <div class="page-main" style="margin-top: 44px">
      <inspect-head v-model="gridCode" type="grid" @change="getInspect"></inspect-head>
      <div class="table-list">
        <div class="table-list-head">
          <van-row>
            <van-col :span="11">巡查点位名称</van-col>
            <van-col :span="9">巡查时间</van-col>
            <van-col :span="4" align="center">操作</van-col>
          </van-row>
        </div>
        <template v-if="inspectPoint.length">
          <div
            class="table-list-row"
            :class="key % 2 ? 'table-list-row__even' : 'table-list-row__odd'"
            v-for="(item, key) in inspectPoint"
            :key="key"
          >
            <van-row type="flex">
              <van-col :span="11">
                <p class="van-ellipsis">{{ item.inspectionPointName }}</p>
              </van-col>
              <van-col :span="9">
                <!-- 已巡查 -->
                <template v-if="item.inspectionPointRecord.length">
                  <span
                    class="table-list-row__status"
                    :class="{
                      'table-list-row__status_abnormal':
                        item.inspectionPointRecord[item.inspectionPointRecord.length - 1].inspectionResult === '1',
                      'table-list-row__status_normal':
                        item.inspectionPointRecord[item.inspectionPointRecord.length - 1].inspectionResult === '0'
                    }"
                  >
                    {{ item.inspectionPointRecord[item.inspectionPointRecord.length - 1].inspectionTime.split(' ')[0] }}
                    <br />
                    {{ item.inspectionPointRecord[item.inspectionPointRecord.length - 1].inspectionTime.split(' ')[1] }}
                    <van-icon
                      name="warning"
                      v-if="item.inspectionPointRecord[item.inspectionPointRecord.length - 1].inspectionResult === '1'"
                    />
                  </span>
                </template>
                <!-- 未巡查 -->
                <template v-else>
                  <span class="table-list-row__status">今日未巡查</span>
                </template>
              </van-col>
              <van-col :span="4">
                <template v-if="item.inspectionPointRecord.length">
                  <van-button type="info" plain size="mini" @click="handleDetail(item)">查看</van-button>
                </template>
                <template v-else>
                  <!-- 未开始巡查 || 暂停巡查（不能上报） -->
                  <van-button
                    type="info"
                    size="mini"
                    :color="
                      !inspectRecord.length || inspectRecord[inspectRecord.length - 1].inspectionState !== '1'
                        ? '#D4D4D4'
                        : ''
                    "
                    :disabled="!inspectRecord.length || inspectRecord[inspectRecord.length - 1].inspectionState !== '1'"
                    @click="handleInspect(item)"
                  >
                    巡查
                  </van-button>
                </template>
              </van-col>
            </van-row>
          </div>
        </template>
        <template v-else>
          <div class="table-list-row table-list-row__old">
            <van-row type="flex">
              <van-col :span="24"><div class="table-list-row__nodata">暂无数据</div></van-col>
            </van-row>
          </div>
        </template>
      </div>
      <inspect-statistics ref="inspectStatistics" v-show="inspectRecord.length"></inspect-statistics>
      <inspect-button
        ref="inspectButton"
        v-show="inspectPoint.length && !$route.query.date"
        @changeStatus="getInspect"
      ></inspect-button>
    </div>
  </div>
</template>
<script>
import CampusSecurity from '@/api/campussecurity'
import InspectHead from '../component/head.vue'
import InspectStatistics from '../component/statistics.vue'
import InspectButton from '../component/button.vue'
import { formatTimes } from '@/libs/tool'
import mapPlugin from '@/libs/mapPlugin'
export default {
  components: { InspectHead, InspectStatistics, InspectButton },
  data() {
    return {
      title: '安全巡检',
      gridCode: '',
      inspectPoint: [],
      inspectRecord: []
    }
  },
  created() {
    this.gridCode = this.$route.query.gridCode
  },
  mounted() {},
  methods: {
    getInspect() {
      CampusSecurity.Api.list({
        gridCode: this.gridCode,
        date: this.$route.query.date || formatTimes.formatDate(new Date())
      }).then(res => {
        const { status, data } = res.data
        if (status === 0) {
          this.inspectPoint = data.gridInspectionPoint
          this.inspectRecord = data.gridInspectionRecord
          this.$nextTick(() => {
            // 按钮组件
            if (this.$refs.inspectButton) {
              this.$refs.inspectButton.inspectPoint = this.inspectPoint
              this.$refs.inspectButton.inspectRecord = this.inspectRecord
              this.$refs.inspectButton.gridCode = this.gridCode
            }
            // 统计组件
            if (this.$refs.inspectStatistics) {
              this.$refs.inspectStatistics.inspectRecord = this.inspectRecord
            }
          })
        }
      })
    },
    // 巡查
    handleInspect(item) {
      mapPlugin.geolocation(result => {
        const lnglat1 = result.position
        const lnglat2 = [item.longitude, item.latitude]
        const distance = lnglat1.distance(lnglat2)
        if (distance <= 100) {
          this.$router.push({
            path: '/campusSecurity/SafetyInspection/StartedToPatrol/report',
            query: {
              gridCode: this.gridCode,
              inspectionPointCode: item.inspectionPointCode,
              inspectionPointName: item.inspectionPointName,
              companyCode: this.inspectRecord[this.inspectRecord.length - 1].inspectionRecordCode
            }
          })
        } else {
          this.$toast({
            message: '距离当前巡查点过远，请重试',
            position: 'bottom'
          })
        }
      })
    },
    handleDetail(item) {
      this.$router.push({
        path: '/campusSecurity/SafetyInspection/StartedToPatrol/report',
        query: {
          gridCode: this.gridCode,
          inspectionPointName: item.inspectionPointName,
          inspectionPointCode: item.inspectionPointCode,
          inspectionTime: formatTimes.formatDate(new Date(item.inspectionPointRecord[0].inspectionTime)),
          type: 'detail'
        }
      })
    }
  }
}
</script>
<style scoped lang="less">
@import '~@/assets/style/inspectVisit/inspect/index.less';
@import '~@/assets/style/table.less';
</style>
